<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue'
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import { ColorInputWithoutInstance } from "tinycolor2";
export default defineComponent({
  name: "WordCloud",
  setup() {
    const color = ref('#409EFF')
    const headleChangeColor = (color: string) => {
      console.log(`颜色值改变事件：${color}`)
    }
    const pureColor = ref<ColorInputWithoutInstance>("red");
    const gradientColor = ref("linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%)");
    function getMenuTree(menuList, pid) {
      let treeList = [];
      for (let i = 0; i < menuList.length; i++) {
        let menu = menuList[i];
        if (menu.pid === pid) {
          let tree = {
            id: menu.id,
            name: menu.name,
            children: getMenuTree(menuList, menu.id)
          };
          tree.children.length === 0 && delete tree.children;
          treeList.push(tree);
        }
      }
      return treeList;
    }
    onMounted(()=>{
      const chart = echarts.init(document.getElementById('main'));
      window.addEventListener('resize', ()=>{
        chart.resize()
      })
      const cityList = [
        {name: "金水区", value: "111",id:'1',pid:null},
        {name: "管城区", value: "222",id:'1-2',pid:'1'},
        {name: "惠济区", value: "458",id:'2',pid:null},
        {name: "二七区", value: "445",id:'2-1',pid:'2'},
        {name: "新郑市", value: "456",id:'2-2',pid:'2'},
        {name: "荥阳市", value: "647",id:'2-3',pid:'2'},
        {name: "巩义市", value: "189",id:'3',pid:null},
        {name: "经开区", value: "664",id:'3-1',pid:'3'},
        {name: "郑东区", value: "652",id:'3-2',pid:'3'},
        {name: "航空港区", value: "732",id:'3-3',pid:'3'},
        {name: "郑州市", value: "852",id:'3-3-1',pid:'3-3'},
      ];
      const data =  getMenuTree(cityList,null)
      const option ={
        tooltip: {
          show: true
        },
        series: [{
          name: '词云图',
          type: 'wordCloud',
          sizeRange: [10, 50],//文字范围
          //文本旋转范围，文本将通过rotationStep45在[-90,90]范围内随机旋转
          rotationRange: [-45, 90],
          rotationStep: 45,
          textRotation: [0, 45, 90, -45],
          //形状
          shape: 'circle',
          textStyle: {
            // normal: {
              color: function() {//文字颜色的随机色
                return 'rgb(' + [
                  Math.round(Math.random() * 250),
                  Math.round(Math.random() * 250),
                  Math.round(Math.random() * 250)
                ].join(',') + ')';
              },
            // },
            //悬停上去的字体的阴影设置
            emphasis: {
              shadowBlur: 10,
              shadowColor: '#333'
            }
          },
          data: cityList
        }]
      };
      chart.setOption(option);
    })


    return {getMenuTree, color,pureColor,gradientColor,headleChangeColor}
  }
})
</script>

<template>
  <div style="width: 200px;height: 600px">
    <h1>颜色选择插件</h1>

    <color-picker v-model:pureColor="pureColor" v-model:gradientColor="gradientColor"/>
  </div>
  <h1>WordCloud-词云图</h1>

  <div id="main"></div>

</template>

<style scoped lang="less">
#main{
  height: 400px;
  width: 100%;
}
</style>
